<template>
  <el-form-item :label="hiddenLabel ? '' : itemObj.label"  :prop="itemObj.prop" :class="[{ fromisedit: !isedit }, itemObj.class]" :label-width="hiddenLabel ? '0' : itemObj.labelWidth" size="mini">
    <slot name="prepend" />
    <slot v-if="itemObj.slot" :name="itemObj.slot" />
    <template v-else>
      <template v-if="itemObj.type === 'input'">
        <el-input v-if="isedit" v-model.trim="ruleForm[itemObj.prop]" :type="itemObj.inputType || 'text'" :disabled="itemObj.disabled" clearable :placeholder="$t('common.pleaseInput')" @input="setData" />
        <span v-else>{{ ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'select'">
        <el-select v-if="isedit" v-model="ruleForm[itemObj.prop]" :placeholder="$t('common.placeholderSelect')" :multiple="itemObj.multiple" :disabled="itemObj.disabled" @change="val => changeSelect(val, itemObj)">
          <el-option v-for="option in itemObj.selectOptions" :key="option.value" :value="option.value" :label="option.label" />
        </el-select>
        <span v-else>{{ ruleForm[itemObj.propName] || ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'remoteSelect'">
        <RemoteSelect
          v-if="isedit"
          v-model="ruleForm[itemObj.prop]"
          :select-options="itemObj.selectOptions"
          :value="ruleForm[itemObj.prop]"
          :label="ruleForm[itemObj.valueProp]"
          :row-key="itemObj.prop"
          :multiple="itemObj.multiple"
          @changeItem="val => changeSelect(val, itemObj)"
        />
        <span v-else>{{ ruleForm[itemObj.valueProp] }}</span>
      </template>
      <template v-if="itemObj.type === 'date'">
        <el-date-picker
          v-if="isedit"
          v-model="ruleForm[itemObj.prop]"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="itemObj.pickerOptions"
          :placeholder="$t('common.placeholderSelect')"
          style="width: 100%"
          @change="setData"
        />
        <span v-else>{{ ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'datetime'">
        <el-date-picker v-if="isedit" v-model="ruleForm[itemObj.prop]" type="datetime" :placeholder="$t('common.placeholderSelect')" style="width: 100%" @change="setData" />
        <span v-else>{{ ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'number'">
        <el-input-number v-if="isedit" v-model.number.trim="ruleForm[itemObj.prop]" :controls="false" clearable :placeholder="$t('common.pleaseInput')" style="width: 100%" @change="setData" />
        <span v-else>{{ ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'rate'">
        <span slot="label" class="starBox">
          {{ itemObj.label }}
          <el-popover placement="bottom" trigger="hover">
            <el-image style="width: 560px" :src="itemObj.img" />
            <i slot="reference" class="start-item el-icon-warning" />
          </el-popover>
        </span>
        <el-rate v-model="ruleForm[itemObj.prop]" :disabled="!isedit" class="starBox" @change="setData" />
      </template>
      <template v-if="itemObj.type === 'radio'">
        <el-radio-group v-if="isedit" v-model="ruleForm[itemObj.prop]" @change="setData">
          <el-radio v-for="option in itemObj.selectOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
        </el-radio-group>
        <span v-else>{{ ruleForm[itemObj.prop] }}</span>
      </template>
      <template v-if="itemObj.type === 'text'">
        <span>{{ ruleForm[itemObj.prop] || itemObj.default }}</span>
      </template>
    </template>
  </el-form-item>
</template>
<script>
/**
 * 请使用global文件下相同组件
 */
import throttle from 'lodash/throttle'
import RemoteSelect from '@/components/AsyncSearch/RemoteSelect.vue'
export default {
  name: 'FormComponents',
  components: {
    RemoteSelect
  },
  props: {
    // 表头字段
    itemObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    hiddenLabel: {
      type: Boolean,
      default: false
    },
    // 表单
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否编辑
    isedit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ruleForm: {}
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.ruleForm = newVal
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeSelect(v, itemObj) {
      this.$emit('remoteSelectChange', {
        value: v,
        ...itemObj
      })
      this.setData()
    },
    setData: throttle(function() {
      this.$emit('update:form', this.form)
    }, 200),
    forceUpdate() {
      this.$forceUpdate()
    }
  }
}
</script>
